<template>
	<view class="my-container">
		<!-- <scroll-view scroll-y @scroll="onPageScroll1" class="page"> -->
		<view class="page">
			<lexiconNavVue title="个人中心" :showBack="false" />
			<view class="top-section">
				<view class="top-section-bg">
					<view class="setting">
						<image class="icon" src="../../../static/image/homePage/icon-kefu.png" @click="kefu = true">
						</image>
						<!-- <image class="icon" v-if="isLogin" src="../../../static/image/homePage/icon-setting.png"
							@click="handleToSetting"></image> -->
					</view>
					<view class="card">
						<!-- @click="handleToLevel" -->
						<view class="avatar" @click="handleToUserInfo">
							<image class="img" src="../../../static/image/app/avatar.png" mode="aspectFit"></image>
							<!-- <image class="img" src="../../../static/image/score/level1.png" mode="aspectFit"></image> -->
						</view>
						<view class="user-info">
							<view class="user-info-name" v-if="isLogin" @click="handleToUserInfo">{{ userName }}</view>
							<view class="user-info-name" v-else @click="handleToLogin">点击登录</view>

							<!-- pczx_teacher  身份 0:普通选手  1:老师 -->
							<view class="user-info-level" @click="handleToUserInfo" v-if="isLogin && tagName">
								{{tagName}}
							</view>
						</view>
					</view>
					<view class="data">
						<view class="data-item" v-for="(item,index) in menu" :key="index" @click="menuClick(item)">
							<image class="img"
								:src="require('../../../static/image/homePage/menu-icon-' + item.icon + '.png')">
							</image>
							<view class="b">{{item.title}}</view>
							<view class="en">{{ item.enTitle }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="section">
				<view class="common-title">蜂竞技曲线｜SPBCN<view class="line"></view></view>
				
			
			</view>
			<view class="section">
				<view class="common-title">蜂计划曲线｜SPBCN<view class="line"></view></view>
				
			
			</view> -->
			<view class="section-top">
				<!-- <view class="sign-status">今日已签到，已连续签到31天</view> -->
			</view>

			<view class="section" v-if="pczx_teacher != 0">
				<view class="section-bg">
					<view class="menu-list">
						<view class="menu-list-item" v-if="(!isLogin && item.show) || isLogin"
							v-for="(item, i) in menuTeacher" :key="i" @click="menu2Click(item)">
							<view>
								<view>{{item.title}}</view>
								<view class="btn-en">{{item.en}}</view>
							</view>
							<view v-if="item.content">{{ item.content }}</view>
							<uv-icon v-else color="#ffffff" name="arrow-right"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="section-bg">
					<view class="menu-list">
						<view class="menu-list-item" v-if="(!isLogin && item.show) || isLogin"
							v-for="(item, i) in menu4" :key="i" @click="menu2Click(item)">
							<view>
								<view>{{item.title}}</view>
								<view class="btn-en">{{item.en}}</view>
							</view>
							<view v-if="item.content">{{ item.content }}</view>
							<uv-icon v-else color="#ffffff" name="arrow-right"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="section" v-if="platform=='android'">
				<view class="section-bg">
					<view class="menu-list">
						<view class="menu-list-item" v-if="(!isLogin && item.show) || isLogin"
							v-for="(item, i) in menu5" :key="i" @click="menu2Click(item)">
							<view>
								<view>{{item.title}}</view>
								<view class="btn-en">{{item.en}}</view>
							</view>
							<view v-if="item.content">{{ item.content }}</view>
							<uv-icon v-else color="#ffffff" name="arrow-right"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="section-bg">
					<!-- <view class="common-title">个人中心｜SPBCN<view class="line"></view></view> -->
					<view class="menu-list">
						<view class="menu-list-item" v-if="(!isLogin && item.show) || isLogin"
							v-for="(item, i) in menu2" :key="i" @click="menu2Click(item)">
							<view>
								<view>{{item.title}}</view>
								<view class="btn-en">{{item.en}}</view>
							</view>
							<!-- <image class="icon" src="https://cdn.spbcn.org/yanxuan/user/right.png" mode=""></image> -->
							<view v-if="item.content">{{ item.content }}</view>
							<uv-icon v-else color="#ffffff" name="arrow-right"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="section-bg">
					<view class="menu-list">
						<view class="menu-list-item menu-list-item-center" v-if="(!isLogin && item.show) || isLogin"
							v-for="(item, i) in menu3" :key="i" @click="menu2Click(item)">
							<view :class="item.warning ? 'warning' : ''">{{item.title}}
								<view class="btn-en">{{ item.en }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 签到弹窗 -->
		<signPop v-if="showSign" :list="weekList"></signPop>

		<popPromptBox v-if="userInfoGuide" msg="请先完善个人信息" btnTxt="去完善" :showClose="true" @confirm="userInfoGuideConfirm"
			@close="userInfoGuideCancel"></popPromptBox>

		<popPromptBox v-if="showLogin" msg="请登录" btnTxt="去登录" :showClose="true" @confirm="handleToLogin"
			@close="showLogin = false"></popPromptBox>

		<popPromptBox v-if="kefu" :showClose="true" :showKefu="true" title="客服通道" @confirm="kefu = false"
			@close="kefu = false"></popPromptBox>

		<selectContentView v-if="showUpdate" :title="updateTitle" :msg="updateMsg" msgCenter="center" confirmTitle="确定"
			cancelTitle="取消" @confirm="updateConfirm" @cancel="updateCancel"></selectContentView>

		<!-- </scroll-view> -->
		<!-- tabbar -->
		<tabbar :activeIndex="1"></tabbar>
	</view>
</template>

<script>
	import navbar from '../../../components/navbar.vue'
	import tabbar from '../../../components/custom-tab-bar.vue'
	export default {
		components: {
			navbar,
			tabbar
		},
		data() {
			return {
				signInfo: {}, // 签到信息
				userName: '',
				tagName: '',
				isLogin: false,
				navBarBg: '',
				userInfoGuide: false,
				showLogin: false,
				menu: [{
						icon: 'ciku',
						flag: 'ciku',
						title: '蜂词典',
						enTitle: 'Word Bank'
					},
					{
						icon: 'jihua',
						title: '蜂计划',
						flag: 'jihua',
						enTitle: 'Plan Bee'
					},{
						icon: 'ftalk',
						title: '蜂Talk',
						flag: 'talk',
						enTitle: 'Bee Talk'
					}, {
						icon: 'jingji',
						title: '蜂竞技',
						flag: 'jingji',
						enTitle: 'Bee Competition'
					},
					// {
					// 	icon: 'ketang',
					// 	title: '蜂课堂',
					// 	enTitle: 'spbcn'
					// }
				],
				menu2: [{
						id: 1,
						title: '用户协议',
						en: 'User Agreement',
						show: true, // 未登录是否展示
						path: '/pages/tabbar/userCenter/userAgreement'
					},
					{
						id: 2,
						title: '隐私政策',
						en: 'Privacy Policy',
						show: true,
						path: '/pages/tabbar/userCenter/privacyPolicy'
					},
					{
						id: 3,
						title: '证照信息',
						en: 'License Information',
						show: true,
						path: '/pages/tabbar/userCenter/licenseInformation'
					},
					{
						id: 4,
						title: 'APP备案号',
						en: 'App Filing Number',
						show: true,
						content: '京ICP备19031249号-2A'
					},
					{
						id: 5,
						title: '版本号',
						en: 'Version Number',
						show: true,
						content: ''
					},
					{
						id: 6,
						title: '举报反馈',
						en: 'Feedback',
						show: false,
						path: '/pages/tabbar/userCenter/feedback'
					}
				],
				menu3: [{
						id: 101,
						title: '注销账号',
						en: 'Logout Account',
						warning: true,
						show: false,
						path: '/pages/tabbar/userCenter/logOff'
					},
					{
						id: 100,
						title: '退出登录',
						en: 'Log Out',
						show: false
					}
				],
				pczx_teacher: 0,
				menuTeacher: [{
					id: 61,
					title: '绑定管理',
					en: 'Binding Management',
					show: false,
					path: '/pages/tabbar/userCenter/teacher/classList'
				}],
				menu4: [{
					id: 12,
					title: '测评信息',
					en: 'Evaluation Information',
					show: false,
					path: '/pages/tabbar/userCenter/evaluationResult'
				}, {
					id: 11,
					title: '我的生词本',
					en: 'My New Words',
					show: false,
					path: '/pages/planBee/wordClockNewWordsPad'
				}],
				menu5: [{
					id: 51,
					title: '设置面容信息', // 人脸采集
					en: 'Set Facial Information', // Facial recognition
					show: false,
					path: '/pages/tabbar/userCenter/baiduface'
				}],
				// {
				// 	id: 52,
				// 	title: '面容采集', // 人脸采集
				// 	en: 'Facial Collection', // Facial recognition
				// 	show: false,
				// 	path: '/pages/tabbar/userCenter/facialCollection'
				// },
				// {
				// 	id: 53,
				// 	title: '微信绑定', // 人脸采集
				// 	en: 'WeChat Binding', // Facial recognition
				// 	show: false,
				// 	path: ''
				// }
				kefu: false,
				showUpdate: false,
				updateTitle: '',
				updateMsg: '',
				platform: '',
				showSign: false,
				weekList: [{
						day: 1,
						dayScore: 1,
						weekScore: 0,
						monthScore: 0,
						active: false
					},
					{
						day: 2,
						dayScore: 2,
						weekScore: 0,
						monthScore: 5,
						active: true
					},
					{
						day: 3,
						dayScore: 3,
						weekScore: 0,
						monthScore: 0,
						active: false
					},
					{
						day: 4,
						dayScore: 4,
						weekScore: 0,
						monthScore: 0,
						active: false
					},
					{
						day: 5,
						dayScore: 5,
						weekScore: 0,
						monthScore: 0,
						active: false
					},
					{
						day: 6,
						dayScore: 6,
						weekScore: 0,
						monthScore: 0,
						active: false
					},
					{
						day: 7,
						dayScore: 7,
						weekScore: 10,
						monthScore: 0,
						active: false
					},
				]
			}
		},
		onShow() {
			const that = this
			uni.setStorageSync('current_background_voice_type', '')
			const systemInfo = uni.getSystemInfoSync();
			const userInfo = uni.getStorageSync('USER_INFO') ? JSON.parse(uni.getStorageSync('USER_INFO')) : {};
			console.log('userInfo=======================', userInfo);
			if (!userInfo.review_android_version) {
				this.menu = this.menu.filter(item => item.flag !== 'talk');
			} else{
				if (systemInfo.appWgtVersion == userInfo.review_android_version) {
					this.menu = this.menu.filter(item => item.flag !== 'talk');
				} else{
					if (!this.menu.filter(item => item.flag === 'talk').length) {
						this.menu.push({
							icon: 'ftalk',
							title: '蜂Talk',
							flag: 'talk',
							enTitle: 'Bee Talk'
						})
					}
				}
			}
		},
		created() {
			uni.hideTabBar({
				animation: false
			})

			this.init()
			uni.$on("userInfoChange", (res) => {
				this.init()
			})
		},

		methods: {
			init() {
				var that = this;
				let info = uni.getStorageSync('USER_INFO')
				if (info) {
					const data = JSON.parse(info)
					console.log(data)
					this.userName = data.user_name || data.phone
					// pczx_teacher  身份 0:普通选手  1:老师
					this.pczx_teacher = data.pczx_teacher
					if (data.pczx_teacher == 0) {
						this.tagName = data.grade ? data.school_name ?
							`${data.school_name}/${this.$util.gradeLabel(data.grade)}` : this.$util.gradeLabel(data
								.grade) : ''
					} else if (data.pczx_teacher == 1) {
						this.tagName = `${data.school_name}/老师`
					} else {
						this.tagName = ''
					}

					this.isLogin = true

					uni.getSystemInfo({
						success: (info) => {
							const platform = info.platform.toLowerCase();
							that.platform = platform
						}
					})
				} else {
					// this.getUserInfo()
					this.isLogin = false
				}

				// 获取当前版本号
				uni.getSystemInfo({
					success: (info) => {
						this.menu2.find(item => item.id === 5).content = `${plus.runtime.version}.${info.appVersionCode}`
					}
				})
			},
			menuClick(item) {
				if (!this.checkInfo()) return
				switch (item.flag) {
					case 'talk':
						this.ftalkClicked()
						break;
					case 'jingji':
						this.handleToGames()
						break;
					case 'ciku':
						this.lexiconClicked()
						break;
					case 'jihua':
						this.planBeeClicked()
						break;
				}
				// if (!this.checkInfo()) return
				// switch (index) {
				// 	case 0:
				// 		this.handleToGames()
				// 		break;
				// 	case 1:
				// 		this.lexiconClicked()
				// 		break;
				// 	case 2:
				// 		this.planBeeClicked()
				// 		break;
				// 	case 3:
				// 		this.notOpen()
				// 		break;
				// }
			},
			checkInfo() {
				const token = uni.getStorageSync('TOKEN_YX')
				const infoC = uni.getStorageSync('infoCompleted')
				if (!token) {
					this.showLogin = true
					return false
				} else if (infoC === '0') {
					// 弹窗提示完善信息
					this.userInfoGuide = true
					return false
				} else {
					return true
				}
			},
			userInfoGuideConfirm() {
				uni.setStorageSync('loginFirst', '0');
				this.userInfoGuide = false
				uni.navigateTo({
					url: '/pages/tabbar/userCenter/userInfo'
				})
			},
			userInfoGuideCancel() {
				this.userInfoGuide = false
				uni.setStorageSync('loginFirst', '0');
			},
			handleToGames() {
				var that = this;

				if ('判断网络状态') {
					if (!that.$util.getNetWorkStatus()) {
						return false;
					}
				}

				uni.navigateTo({
					url: '/pages/games/index'
				})
			},
			handleToSetting() {
				uni.navigateTo({
					url: '/pages/tabbar/userCenter/setting'
				})
			},
			ftalkClicked() {
					uni.navigateTo({
						url: '/pages/bmaster/oralAssessment'
					})
			},
			notOpen() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放'
				})
			},
			lexiconClicked() {
				uni.navigateTo({
					url: '/pages/lexicon/lexiconIndex'
				})
			},
			planBeeClicked() {
				uni.navigateTo({
					url: '/pages/planBee/planBeeHome'
				})
			},
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					if (res.code === 200) {
						console.log(res.data)
						this.isLogin = true
						this.userName = res.data.user_name || res.data.phone
						console.log('userinfo___', res.data);
						uni.setStorageSync('USER_INFO', JSON.stringify(res.data))
					}
				})
			},
			handleToLogin() {
				this.showLogin = false
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			onPageScroll1(e) {
				console.log('e.detail.scrollTop', e.detail.scrollTop)
				if (e.detail.scrollTop > 10) {
					console.log('111')
					this.navBarBg = 'rgba(253, 180, 40,' + e.detail.scrollTop / 157 + ')'
					this.hideBg = true
				} else {
					this.navBarBg = 'transparent'
					this.hideBg = false
				}
			},
			menu2Click(item) {
				console.log(item)
				if (item.path) {
					uni.navigateTo({
						url: item.path
					})
				} else if (item.id === 100) {
					this.logout();
				} else if (item.id === 5) {
					this.checkUpdate()
				}
			},
			logout() {
				uni.$emit("userInfoChange", true)
				uni.clearStorage();
				uni.setStorageSync('isFirstIn', '1')
				this.handleToLogin();
			},
			handleToUserInfo() {
				console.log(this.isLogin)
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/tabbar/userCenter/userInfo'
					})
				}
			},
			handleToLevel() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/tabbar/userCenter/level/level'
					})
				}
			},
			// 检查更新
			checkUpdate() {
				var that = this;
				// 在支持的平台上检查更新
				uni.getSystemInfo({
					success: (info) => {
						if (info.uniPlatform === 'web') return uni.showToast({
							title: '浏览器暂不支持',
							icon: 'none'
						})
						// 版本号、通道等信息
						const version = plus.runtime.version;
						const platform = info.platform.toLowerCase(); // 全部转化为小写字母 ios/android

						that.platform = platform
						// console.log(version, platform)
						// 获取服务器上的最新版本信息
						that.$http.getUpdateAppInfo().then(res => {
							if (res.code === 200) {
								that.android_url = res.data.android_url
								const needUpdate = platform === 'android' ? res.data
									.android_need_update : res.data.ios_need_update
								const newVersion = platform === 'android' ? res.data.android_version :
									res.data.ios_version

								// zhangtr 当数据库版本高于app自身的版本号数字时，进行更新提示
								if (newVersion && that.$util.getVersionNumber(version) !== that.$util
									.getVersionNumber(newVersion) &&
									that.$util.getVersionNumber(version) < that.$util
									.getVersionNumber(newVersion)) {
									that.updateTitle = '发现新版本'
									that.updateMsg = platform === 'android' ? '检查到新版本，是否立即更新？' :
										'请前往App Store下载最新版本'
									that.showUpdate = true
								} else {
									uni.showToast({
										title: '当前已是最新版本',
										icon: 'none'
									})
								}
							}
						})

					}
				});

			},
			updateConfirm() {
				this.showUpdate = false
				this.handleToUpdate()
			},
			updateCancel() {
				this.showUpdate = false
			},
			handleToUpdate() {
				const that = this
				// 用户确定更新
				if (this.platform === 'android') {
					// 可以调用uni.downloadFile下载并更新应用
					uni.downloadFile({
						url: that.android_url, // 新版本的下载地址
						success: function(downloadResult) {
							if (downloadResult.statusCode === 200) {
								// 下载成功，执行更新
								const installUrl = downloadResult.tempFilePath;
								// uni.installApp({
								// 	filePath: installUrl,
								// 	success: function() {
								// 		console.log('更新成功');
								// 	},
								// 	fail: function(err) {
								// 		console.error('更新失败', err);
								// 	}
								// });

								plus.runtime.install(installUrl, {
									force: false
								}, function() {
									plus.runtime.restart();
								});
							}
						},
						fail: function(err) {
							console.error('下载失败', err);
						}
					});
				} else {
					//在App Store Connect中的App Store下的app信息，可找到appleId
					let appleId = 6504004311
					plus.runtime.launchApplication({
						action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
					}, function(e) {
						console.log('Open system default browser failed: ' + e.message);
					});
				}
			}

		}
	}
</script>

<style lang="less">
	.my-container {
		background-color: #fff8e1;
		height: 100vh;
		overflow-y: auto;
	}

	.page {
		height: 100%;
		overflow-y: auto;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.section {
		width: 90%;
		background: linear-gradient(to bottom, #130e00, #373632);
		border-radius: 20px;
		box-sizing: border-box;
		margin: 0 auto 20px;
		position: relative;
		top: -40px;

		.section-title {
			font-size: 14px;
			font-family: hzgb;
			color: #000;
			background-color: #eee;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 30px;
			margin-bottom: 10px;

			text {
				margin-left: 10px;
			}
		}

		.section-bg {
			width: 100%;
			height: 100%;
			background-image: url(../../../static/image/homePage/diwen.png);
			background-size: cover;
			border-radius: 20px;
		}
	}

	.card {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 24px;
		box-sizing: border-box;
		margin-bottom: 14px;

		.user-info-name {
			font-size: 20px;
			font-family: hzgb;
			color: #fff;
			margin-bottom: 5px;
		}

		.user-info-level {
			font-size: 12px;
			color: #000;
			padding: 2px 10px;
			background: linear-gradient(to top, #fff497 0%, #ffd16b 100%);
			border-radius: 12px;
			display: inline-block;
		}

		.avatar {
			// width: 66px;
			// height: 66px;
			// background-color: #fff;
			border-radius: 66px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10px;

			.img {
				width: 76px;
				height: 76px;
			}
		}
	}

	.top-section {
		background: linear-gradient(to bottom, #130e00 0%, #373632 100%);
		height: 270px;
	}

	.top-section-bg {
		background-image: url(../../../static/image/homePage/diwen.png);
		background-size: cover;
		width: 100%;
		height: 100%;

		.setting {
			padding-right: 24px;
			text-align: right;
			padding-top: 6px;

			.icon {
				width: 32px;
				height: 32px;
				margin-left: 10px;
			}
		}
	}

	.data {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20px;

		.data-item {
			padding: 0 22px;
			// border-right: 2px solid #ffd36e;
			text-align: center;
			height: 60px;
			flex: 1;

			&:last-child {
				border-right: none;
			}

			// .a{
			// 	font-size: 30rpx;
			// 	color: #000;
			// 	font-weight: bold;
			// }
			.img {
				width: 40px;
				height: 40px;
			}

			.b {
				color: #fff;
				font-size: 14px;
				font-weight: bold;
			}

			.en {
				color: #fff;
				font-size: 9px;
			}
		}
	}

	.menu {
		margin: 60rpx 32rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.menu-item {
			text-align: center;

			.icon {
				height: 54rpx;
			}

			.title {
				color: #202020;
				font-size: 26rpx;
				font-weight: bold;
				margin-top: 12rpx;
			}

			.enTitle {
				font-size: 22rpx;
				color: #202020;
				margin-top: 4rpx;
			}
		}
	}

	.menu-list-item {
		margin: 0 30px;
		padding: 12px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		border-bottom: 1px solid #464239;
	}

	.menu-list-item-center {
		justify-content: center;
		text-align: center;
	}

	.warning {
		color: #facd68;
	}

	.section-top {
		width: 100%;
		height: 42px;
		padding: 14px 20px;
		background-color: #fff8e1;
		border-radius: 30px 30px 0 0;
		position: relative;
		top: -40px;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.sign-status {
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		color: #000;
		height: 36px;
		line-height: 32px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		border-radius: 36px;
		border: 2px solid #e0bd66;
	}
</style>